<template>
  <el-container>
    <el-header class="dzy-main-header">
      <div class="btn-group-event">
        <btn-group></btn-group>
      </div>
    </el-header>
    <el-main>
      <div class="custom-integralType-container eventImg-container-mar">
        <div class="custom-eventImg-container">
          <img src="~@/assets/img/event.jpg" alt="" />
        </div>
      </div>
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogFormVisible"
        class="custom-dialog_style_twoLine"
        :before-close="cancel"
        :close-on-click-modal="false"
      >
        <el-form label-width="50%" ref="formData" :rules="rules">
          <el-form-item
            label="上报人："
            label-width="30%"
            :disabled="true"
            class="el-name"
          >
            <el-checkbox
              v-model="isAnonymous"
              class="anonymityCheckbox"
              border
              size="medium"
              >匿名</el-checkbox
            >
            <el-input
              v-if="isAnonymous"
              type="password"
              autocomplete="off"
            ></el-input>
            <el-input v-else autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="上报人电话："
            label-width="30%"
            prop="reporterContact"
          >
            <el-input autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="上报时间：" label-width="30%" prop="reportDate">
            <el-date-picker
              value-format="timestamp"
              placeholder="选择日期时间"
              :picker-options="dataPickerBeforeTodayOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="事件分类："
            prop="eventCategory"
            label-width="30%"
            style="margin-bottom: 22px"
          >
            <div class="block">
              <el-select placeholder="请选择">
                <el-option
                  v-for="(item, index) in eventCategoryOption"
                  :key="index"
                  :value="item.id"
                  :label="item.valueName"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item
            label="选择经纬度："
            prop="longitude"
            class="custom-longla-container"
          >
            <el-input :disabled="true" placeholder="经度"></el-input>
            <el-input :disabled="true" placeholder="纬度"></el-input>
            <el-button type="text" style="color: red">[ 选择 ]</el-button>
          </el-form-item>
          <el-form-item label="" label-width="30%"> </el-form-item>
          <el-form-item
            label="发生地点："
            prop="happenAddress"
            label-width="30%"
          >
            <el-input autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="网格：" prop="gridIdArr" label-width="30%">
            <div class="block">
              <el-cascader
                placeholder="请选择"
                :options="treeData"
                :props="gridProps"
              >
              </el-cascader>
            </div>
          </el-form-item>
          <el-form-item
            label="事件描述："
            prop="description"
            label-width="30%"
            class="custom-textarea-container"
          >
            <el-input type="textarea"></el-input>
          </el-form-item>
          <el-form-item
            label=""
            label-width="30%"
            class="custom-textarea-container"
          >
          </el-form-item>
          <el-form-item
            label="图片："
            class="custom-img-container"
            style="width: 100%"
          >
            <app-upload ref="appUpload"></app-upload>
          </el-form-item>
          <el-form-item
            label=""
            label-width="30%"
            class="custom-textarea-container"
          >
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button>取 消</el-button>
          <el-button type="primary">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog
        class="dialog-body-mini"
        :visible.sync="showMap"
        title="选择经纬度"
        width="70%"
        top="8vh"
      >
        <edit-map v-if="showMap" :mode="mapMode" :target="mapTarget"></edit-map>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      currentSelectedData: [],
      eventCategoryOption: [],
      dialogTitle: "aaa",
      dialogFormVisible: true,
      isAnonymous: true,
      showOnly: true,
      mapHackReset: true,
      showMap: true,
      mapMode: "simple",
      mapTarget: {},
      formData: {},
      treeData: [],
      rules: {
        reporterContact: [
          { required: true, validator: validatePhone, trigger: "blur" },
        ],
        reportDate: [
          { required: true, message: "请选择上报时间", trigger: "blur" },
        ],
        eventCategory: [
          { required: true, message: "请选择事件分类", trigger: "blur" },
        ],
        longitude: [
          { required: true, message: "请选择经纬度", trigger: "blur" },
        ],
        happenAddress: [
          { required: true, message: "请输入发生地", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请填写事件描述", trigger: "blur" },
        ],
        gridIdArr: [{ required: true, message: "请选择网格", trigger: "blur" }],
      },
      dataPickerBeforeTodayOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      gridProps: {
        label: "name",
        value: "id",
      },
    };
  },

  mounted() {},
  methods: {
    getTreeData() {
      let data = getUserGridTree();
      if (data && data instanceof Array) {
        this.treeData = data;
      }
    },
  },
};
</script>

<style scoped>
.anonymityCheckbox {
  position: absolute;
  top: 2px;
  left: 225px;
}
.custom-eventImg-container {
  height: 526px;
}
.custom-eventImg-container img {
  width: 100%;
}
.eventImg-container-mar {
  margin-top: 2%;
}
.btn-group-event {
  width: 90%;
  margin: 0 auto;
}
.custom-dialog_style_twoLine
  .el-form
  >>> .custom-img-container
  .el-form-item__label {
  width: 25% !important;
}
.custom-dialog_style_twoLine >>> .el-form .custom-img-container {
  margin-bottom: 0px;
}
.custom-dialog_style_twoLine
  .el-form
  >>> .custom-img-container
  .el-form-item__content {
  position: relative;
}
.custom-dialog_style_twoLine .el-form >>> .custom-textarea-container {
  margin-bottom: 20px;
}
.custom-dialog_style_twoLine
  .el-form
  >>> .custom-textarea-container
  .el-textarea {
  position: relative;
}
.custom-dialog_style_twoLine .el-form >>> .el-name .el-form-item__content {
  display: inline-block;
  margin-left: 0 !important;
  width: 40%;
}
</style>
